Creating Time-Axis Charts

Working with Temporal Data

Sample Dataset

Here's an example of temporal data we'll use to create a stock price visualization:

Year	High	Low	Close	Open
2001	36.85	21.44	33.125	22.062
2002	34.875	20.705	25.85	33.325
2003	29.76	22.55	27.37	26.15

Setting Up DataModel

1. Define Temporal Schema

For time-based visualizations, you need to specify both the temporal field and its format:

const schema = [
  {
    name: "Year",
    type: "dimension",
    subtype: "temporal",
    format: "%Y", // DateTime format specification
  },
  {
    name: "Close",
    type: "measure",
  },
];

DateTime Formats

DataModel supports various DateTime formats. Some common formats:

• %Y: Full year (e.g., 2024)
• %Y-%m-%d: ISO date format
• %d/%m/%Y: Day/Month/Year format

Check the DataModel API reference for a complete list of supported formats.

2. Initialize DataModel

// Load DataModel class
const DataModel = muze.DataModel;

// Parse data with schema
const parsedData = await DataModel.loadData(data, schema);

// Create instance
const dm = new DataModel(parsedData);

Creating the Visualization

1. Set Up Canvas

const canvas = muze.canvas();
canvas.data(dm);

2. Configure Axes

canvas
  .rows(["Close"]) // Y-axis: stock prices
  .columns(["Year"]); // X-axis: temporal data

Automatic Line Chart

When the x-axis field is temporal, Muze automatically creates a line chart as the default visualization type.

Complete Implementation

Here's a full example including titles and subtitles:

const { muze, getDataFromSearchQuery, env } = viz;
const DataModel = muze.DataModel;

// Define schema with temporal configuration
const schema = [
  {
    name: "Year",
    type: "dimension",
    subtype: "temporal",
    format: "%Y",
  },
  {
    name: "Close",
    type: "measure",
  },
];

// Create and configure visualization
const formattedData = await DataModel.loadData(data, schema);
const dm = new DataModel(formattedData);

muze
  .canvas()
  .data(dm)
  .rows(["Close"])
  .columns(["Year"])
  .title("MSFT Stocks", {
    position: "top",
    align: "center",
  })
  .subtitle("1986 - 2020", {
    position: "top",
    align: "center",
  })
  .mount("#chart");

Best Practices for Temporal Charts

1. Data Preparation

   • Ensure consistent date formats
   • Handle missing dates appropriately
   • Consider timezone implications

2. Visualization

   • Choose appropriate time intervals
   • Consider data density when displaying time ranges
   • Use clear date formatting for axis labels

3. Performance

   • Aggregate data for large time ranges
   • Consider data sampling for dense time series

Common Issues

If you are facing issues with a temporal chart not renderring correctly makre sure you check for the following:

• Incorrect date format specification
• Inconsistent date formats in source data
• Missing or invalid dates